一、简介
ES6 -> ECMA 标准
ES6 -> 2015年6月 ES6.0
每年6月份,发布一个版本
ES6环境:
webpack3.x
Traceur
二、let、const
2.1 关于定义(声明)变量
- var a=12; 之前
- let let a=12 相当于之前的 var
- const 常量, 定义好了不能改变
2.2 作用域:
- 全局作用域
- 函数作用域
2.3 let注意
1.没有预解析
,不存在变量提升
在代码块内,只要let定义变量,在之前使用,都是报错
先定义完,再使用
<script>
let a = 12;
function fn(){
alert(a); //TDZ开始 暂时性死区
alert(b)
let a = 5; //TDZ 结束
let b = 12;
}
fn();
</script>
2.同一个作用域里, 不能重复定义变量
,可以赋值
3.for循环,for循环里面是父级作用域
,里面又一个
for(let i = 0; i<3; i++){
let i = 'abc';
console.log(i);
}
2.4 块级作用域:
{
//块级作用域
}
{{{{let a = 12}}}}
if(){xx}
for(){}
while(){}
2.5 const: 特性和let一样
const定义变量不能修改const定义完变量,必须有值,不能后赋值,不能修改,
一般定义配置文件
。
但是对象是可以修改的,因为它是引用
冻结:Object.freeze
(对象),就可以不被修改。
const config={
host:
username:
password:
version:
}
{
//TODO
}
IIFE,立即执行匿名函数
(function(){
//TODO
})()
建议:
以后 就用 let 不要在使用var
const http = require('http');
三、解构赋值(重要,常用
)
* 非常有用,特别在做数据交互 ajax
3.1 格式
let [a,b,c] =[12,5, 6];
注意: 左右两边,结构格式要保持一致
json:
let {name,age, job} = {
name:'Strive',
age:18,
job:'码畜'
};
别名:
let {name:n,age:g, job:a} = json;
3.2 解构时候可以给默认值
let [a,b, c="默认值"] = ['aaa','bbb'];
注意:null和undefined,null是一个对象,
有值
let a = 12;
let b = 5;
import {a,b,c} from './mod'
四、字符串模板(常用
)
4.1 字符串模板:``
优点: 可以随意换行
`${变量名字}`
字符串连接(以前用:+
),要死人的。
现在:${变量名字}
let name ='Strive';
let age = 18;
let str = `这个人叫${name}, 年龄是 ${age}岁`;
4.2 关于字符串一些东西
字符串查找:
str.indexOf(要找的东西) 返回索引(位置) ,没找到返回-1
str.includes(要找的东西) 返回值 true/false
判断浏览器: includes
<script>
if(navigator.userAgent.includes('Chrome')){
alert('是chrome')
}else{
alert('!是chrome')
}
</script>
字符串是否以谁开头:
str.startsWith(检测东西)
检测地址
字符串是否以谁结尾:
str.endsWith(检测东西)
.png
重复字符串:
str.repeat(次数);
填充字符串:
str.padStart(整个字符串长度, 填充东西) 往前填充
str.padEnd(整个字符串长度, 填充东西) 往后填充
str.padStart(str.length+padStr.length, padStr)
五、函数(重要
)
5.1 函数变化
1. 函数默认参数
function show({x=0,y=0}={}){
console.log(x,y);
}
show()
2. 函数参数默认已经定义了,不能再使用let,const声明
function show(a=18){
let a = 101; //错误
console.log(a);
}
show()
5.2 扩展运算符、Rest运算符:
扩展运算符:...
展开数组:
<script>
let arr = ['apple','banana','orange'];
console.log(arr);
console.log(...arr);
</script>
... :
[1,2,3,4] -> ... [1,2,3,4] -> 1,2,3,4,5
...:
1,2,3,4,5 -> ...1,2,3,4,5 -> [1,2,3,4,5]
剩余参数: 必须放到最后
function show(a,b,...c){
console.log(a,b);
console.log(c);
}
show(1,2,3,4,5)
5.3 箭头函数:(重要,常用
)
=>
let show = () => 1;
格式:
() => return东西
或者
() =>{
语句
return
}
例子:
var f = v => v;
//等同于
var f = function(v){
return v;
}
var sum = (num1,num2) => num1 + num2;
//等同于
var sum = function(num1,num2){
return num1 + num2;
}
[1,2,3].map(function (x) {
return x * x;
});
//箭头函数写法
[1,2,3].map(x => x *x); //简洁了许多
从例子我们可以看出,省略了function,花括号{}
用=>
代替了。这种写法更简洁了。
注意:
-
this
问题, - 箭头函数里面没有
arguments
, 用 ‘...
’ - 箭头函数不能当构造函数
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。